<template>
    <Menu
        v-if="topMenuLists.length>0"
        @on-select="changeTop"
        class="topMenu"
        mode="horizontal"
        :theme="theme1"
        :active-name="topActiveName"
    >
        <div class="top">
            <img class="logo" src="../assets/images/logo.png"/>
            <span class="logo-text">互联网运营端</span>
        </div>
        <div class="center">
            <li v-for="(item,index) in leftMenuLists" :key="index">
                <p @click="showurl(item,index)">
                    {{item.name}}
                    <img src="../assets/images/hdown.png" alt="" v-if="!item.status">
                    <img src="../assets/images/hup.png" alt="" v-if="item.status">
                </p>
            </li>
        </div>
        <div class="topright">
            <!-- <div class="time">
                <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ty&skin=durian&color=FFFFFF" frameborder="0" width="300" height="75" allowtransparency="true"></iframe>
            </div> -->
            <div class="logout">
                <div class="avatar">
                    <img v-if="!userIcon" src="../../static/img/doctor.png" @click="edit" style="cursor:pointer;">
                    <img v-if="userIcon" :src="userIcon" @click="edit" style="cursor:pointer;">
                </div>
                <div class="info">
                    <span>{{username || "admin"}}</span>
                    <br>
                    <a href="javascript:void(0);" @click="logout">
                    <img src="../../static/img/close.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="url" v-if="show">
            <div v-for="(item,index) in leftMenuLists" :key="index">    
                <div :class="{'boxlong':index==3,'box':index!=2||index!=3}">
                    <span
                        :title="childItem.name"
                        v-for="(childItem,index) in item.childLists"
                        :key="index"
                        :name="item.id+'-'+childItem.id"
                        :to="childItem.path"
                        :replace="true"
                        v-if="cpg==childItem.oname"
                        :class="{span2:item.childLists.length<6,span1:item.childLists.length>=6}"
                        @click="change(childItem.path)"
                    >{{childItem.name}}</span>
                </div>
            </div>
            <img src="../assets/images/xClose.png" alt="" class="close" @click="close(index)">
        </div>
    </Menu>
</template>
<script>
import { Menu, MenuItem } from "view-design";
import cookie from "./../utils/cookie.js";
import aesUtils from "@/plugins/aes-utils.js";
export default {
    data() {
        return {
            theme1: "primary",
            username: "",
            userIcon: "",
            operateUserId: "",
            show:false,
            cpg:null
        };
    },
    props: ["topActiveName", "topMenuLists","leftMenuLists"],
    components: {
        Menu,
        MenuItem
    },
    computed: {
        lists() {
            return this.$store.state.leftMenuList;
        }
    },
    created(){
        this.username = cookie.getCookie("username");
        this.userIcon = cookie.getCookie("userIcon");
        this.operateUserId = cookie.getCookie("operateUserId");
    },
    methods: {
        showurl(val,index){
            this.cpg = val.name
            this.show = !this.show
            this.$store.state.leftMenuList[index].status=!this.$store.state.leftMenuList[index].status
        },
        close(index){
            this.show = false
            this.$store.state.leftMenuList[index].status=false
        },
        change(path) {
            this.show = !this.show
            this.functionJS.queryNavgationTo(this, path);
        },
        changeTop(name) {
            this.$store.commit("setLeftMenuList", name);
            // 公用方法
            this.functionJS.queryNavgationTo(this, '/index');
        },
        
        
    }
};
</script>
<style lang="less" scoped>
.topMenu {
    width: 100%;
    height: 100%;
    position: relative;
    background: #07a6a5;
    box-shadow: 0 5px 25px #b1dede;
    .url{
        clear: both;
        width: 100%;
        min-height: 50px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background: #fff;
        display: flex;
        text-align: left;
        position:absolute;
        top:60px;
        padding: 0 120px;
        box-shadow: 0 5px 25px #b1dede;
        .box{
            .span1{
                display: inline-block;
                width: 150px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
                margin:0 7% 0 0;
            }
            .span2{
                display: inline-block;
                width: 220px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
            }
            span:hover{
                cursor: pointer;
                color: #07a6a5;
                font-size: 16px;
                font-weight: 500;
            }
        }
        .boxtwo{
            width: 80%;
            .span1{
                display: inline-block;
                width: 150px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
                margin:0 7% 0 0;
            }
            .span2{
                display: inline-block;
                width: 220px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
            }
            span:hover{
                cursor: pointer;
                color: #07a6a5;
                font-size: 16px;
                font-weight: 500;
            }
        }
        .boxlong{
            width: 110%;
            .span1{
                display: inline-block;
                width: 150px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
                margin:0 7% 0 0;
            }
            .span2{
                display: inline-block;
                width: 220px;
                cursor: pointer;
                color: #666;
                font-size: 16px;
            }
            span:hover{
                cursor: pointer;
                color: #07a6a5;
                font-size: 16px;
                font-weight: 500;
            }
        }
        .close{
            width: 20px;
            height: 20px;
            position:absolute;
            right: 20px;
            top:10px;
        }
    }
    .top{  
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #07a6a5;
        .logo {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin: 0 2px 0 15px;
        }
        .logo-text {
            text-align: center;
            display: inline-block;
            font-size: 18px;
            color: #fff;
            vertical-align: middle;
        }
    }
    .center{
        // width: auto;
        // float: left;
        display: flex;
        flex-direction: column;
        // cursor: pointer;
        li{
            padding: 0 10px;
            float: left;
            p{
                font-size: 16px;
                color: #fff;
                img{
                    width: 25px;
                    height: 25px;
                }
            }
        }
    }
    .topright{
        width: auto;
        display: flex;
        float: right;
        .time{
            float: right;
            width: 220px;
            height: 60px;
            text-align: right;
            line-height: 25px;
            margin-right: 10px;
            padding: 5px 30px 0 0;
            .p1{
                font-size: 17px;
                color: #fff;
                margin-top: -10px;
            }
            .p2{
                font-size: 16px;
                color: #fff;
            }
            .mr{
                margin-left: 10px;
            }
        }
        .logout {
            display: flex;
            position: relative;
            right: 30px;
            color: #fff;
            height: 60px; 
            .avatar {
                padding: 1px 5px 0 0;
                img {
                    width: 45px;
                    height: 45px;
                    border:2px solid #fff;
                    border-radius: 50%;
                }
            }
            .info {
                line-height: 22px;
                position: relative;
                top: 9px;
                text-align: center;
                left: 10px;
                a{
                    color: #fff;
                    img{
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }
    }
}
</style>